<!--
 * @Author: coocase
 * @Date: 2021-04-11 14:18:14
 * @LastEditTime: 2021-05-11 21:16:58
 * @LastEditors: coocase
 * @Description: 
 * @FilePath: \git\dami\src\pages\account\users.vue
-->
<template>
<div>
    <pageHeader :menuName="menu"></pageHeader>
     <Table border :columns="columns" :data="pages.pageData">
        <template slot-scope="{ row }" slot="name">
            <strong>{{ row.name }}</strong>
        </template>
        <template slot-scope="{ index }" slot="action">
            
            <Button type="error" size="small" @click="remove(index)">Delete</Button>
        </template>
    </Table>
    <Page :total="pages.pageTotal" :page-size="pages.pageSize" @on-change="pageChange" :current="pages.pageNum"/>
</div>
   
</template>

<script>
import PageHeader from './pageHeader'
export default {
    
    name:'users',
    props: ['datas'],
     data () {
            return {
                //绑定的表单字段
                columns: [
                    {
                        title: '用户名',
                        slot: 'name'
                    },
                    {
                        title: '电话号码',
                        key: 'phoneNumber'
                    },
                    {
                        title: '身份证号',
                        key: 'id'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 150,
                        align: 'center'
                    }
                ],
                //初始化信息
                pages:{
                    pageNum:1,
                    pageTotal:10,
                    pageSize:5,
                    pageData:[]
                },
                menu:'users'
            }
        },
        components:{
        PageHeader
    },
        methods: {
            show (index) {
                this.$Modal.info({
                    title: 'User Info',
                    content: `Name：${this.pageData[index].name}<br>PhoneNumber：${this.pageData[index].phoneNumber}<br>Id：${this.pageData[index].id}`
                })
            },
            remove (index) {
                this.pages.pageData.splice(index, 1);
            },
            //获得后台信息并初始化
            pageInit(){
                this.pages.pageNum = 1;
                this.pages.pageTotal = this.datas.length*5,
                // Array.from()  将一个类数组对象或者可遍历对象转换成一个真正的数组
                this.pages.pageData = Array.from(this.datas[0].datas)
             
            },
            //页码改变后信息改变
            pageChange(i){
                this.pages.pageNum = i;
                this.pages.pageSize = this.datas[i-1].datas.length
                this.pages.pageData = Array.from(this.datas[i-1].datas)
            
            }
        },
        created:function(){
            
           
        },
        mounted:function () {  
            // console.log("mounted");
            this.pageInit()
        }
}
</script>

<style>

</style>